<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>手机验证码找回</title>

    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/login/index.css" rel="stylesheet"/>

    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/HttpService.js"></script>
    <style>
        .send-sms{
            position: absolute;
            top:1rem;
            right: 20px;
            width: 7rem;
            line-height:2rem;
            font-size: 1.07rem;
            border-radius: 0.5rem;
            padding: 0 5px;
            border: 1px solid #88D57E;
            color: #88D57E;
            text-align: center;
        }
        .left-padding{
            padding-left: 5rem!important;
        }
        .right-padding{
            padding-right: 8rem!important;
        }
        .remain-time{
            position: absolute;
            right: 5rem;
            width: 50px;
            line-height: 2rem;
            text-align: center;
            font-size: 1.33rem;
            font-weight: 400;
            color: #88D57E;
            border-radius: 0.5rem;
            padding: 0 10px;
            border: 1px solid #88D57E
        }

        .xl-btn.no-click{
            background-color: #BFBFBF;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body>
<div id="app">
    <div class="content-box">
        <img class="nav-icon-back" @click="navBack" src="../../img/common/btn_back.png" alt="">
        <div class="top-content">

            <div class="header">手机验证码找回</div>
            <div class="input_box">
                <div class="input_outer">
                    <input class="left-padding" v-model="form.phone" type="text" placeholder="请输入手机号">
                    <div class="label_left">
                        <img class="input_icon" src="../../img/login/ic_password@2x.png">
                    </div>
                </div>
                <div class="input_outer">
                    <input class="left-padding right-padding"  v-model="form.authCode" type="text"
                            placeholder="请输入验证码">
                    <div class="label_left">
                        <img class="input_icon" src="../../img/login/ic_captcha@2x.png">
                    </div>
                    <div class="label_right" @touchstart="getSmsCode">
                        <div  v-if="lessTime <= 0" class="right_icon send-sms">获取验证码</div> <div  v-if="lessTime > 0" class="right_icon send-sms">{{lessTime}}s</div>
                    </div>
                </div>
            </div>
            <div @click="doNext" class="xl-btn" :class="{'no-click':!canClick}">下一步</div>
        </div>
        <img class="bg-img" src="../../img/login/bg_login_screen.png" alt="">
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: '登录',
            passwordMod: true,
            smsSend: false,
            lessTime: 0,
            form: {
                phone: '',
                authCode: '',
                userType:'pd'
            }
        },
        computed: {
            canClick: function () {
                return  this.form.phone&&this.form.authCode;
            }
        },
        methods: {
            navBack:function(){
                mui.back();
            },
            // 登录
            doNext: function () {
                var params = this.form;
                if (!this.canClick) {
                    return mui.toast("请填写完整信息")
                }
                $Service.sms.checkSMSCode(params, function (data) {
                    setItem(RESET_PWD_USER_ID,data.id)
                    redirect("pages/login/resetPWD.html");
                })


            },
            // 获取sms验证码
            getSmsCode:function () {
                var phone = this.form.phone;
                if (!phone) {
                    return mui.toast("请输入手机号码！")
                }
                if (vm.smsSend) {
                    return mui.toast("短信发送中,请稍后重试！")
                }
                vm.smsSend = true;
                $Service.sms.getCode({ phone: phone, userType: 'pd'},function (data) {
                    vm.lessTime = 60;
                    var timeId = setInterval(function () {
                        if ( vm.lessTime === 0) {
                            vm.smsSend = false;
                            vm.lessTime = 0;
                            clearInterval(timeId);
                        }
                        vm.lessTime--;
                    },1000)
                },function () {
                    vm.smsSend = false;
                })


            }
        }
    });
</script>
</body>
</html>
